<template>
  <div class="side-dlg" :class="{opened: visible}">
    <div class="opener" @click="toggle">
      <i v-if="!visible" class="el-icon-d-arrow-left"></i>
      <i v-else class="el-icon-d-arrow-right"></i>
    </div>
    <div class="wrapper">
      <div class="title">配电房概览</div>
      <div v-loading="loading" class="main">
        <div v-if="allData" style="padding: 18px;">
          <card-list title="全局概览信息" class="card1">
            <div class="list">
              <data-row :total-data="data1" label="进线总加"></data-row>
              <data-row :total-data="data2" label="变压器总加"></data-row>
              <data-row :total-data="[{value: allData.highBlance}]" label="高压侧平衡状况"></data-row>
              <data-row :total-data="[{value: allData.lowBlance}]" label="变压器用电平衡状况"></data-row>
            </div>
          </card-list>
          <card-list title="告警信息" class="card1">
            <el-radio-group slot="func" v-model="dateType" @change="tabClick">
              <el-radio-button size="mini" label="day">当日</el-radio-button>
              <el-radio-button size="mini" label="month">当月</el-radio-button>
            </el-radio-group>
            <div v-if="dateType === 'day'" class="list">
              <alarm-row label="当日事故" :alarm-num="allData.countFault" :todo-num="allData.doFault"></alarm-row>
              <alarm-row label="越限" :alarm-num="allData.countLimit" :todo-num="allData.doLimit"></alarm-row>
              <alarm-row
                label="异常"
                :alarm-num="allData.countAbnormal"
                :todo-num="allData.doAbnormal"
              ></alarm-row>
              <alarm-row label="站级通信" :alarm-num="allData.countComm" :todo-num="allData.doComm"></alarm-row>
              <alarm-row
                label="采集装置通信状态"
                :alarm-num="allData.countGather"
                :todo-num="allData.doGather"
              ></alarm-row>
            </div>
            <div v-else class="list">
              <alarm-row
                label="当月事故"
                :alarm-num="monthData.countFault"
                :todo-num="monthData.doFault"
              ></alarm-row>
              <alarm-row label="越限" :alarm-num="monthData.countLimit" :todo-num="monthData.doLimit"></alarm-row>
              <alarm-row
                label="异常"
                :alarm-num="monthData.countAbnormal"
                :todo-num="monthData.doAbnormal"
              ></alarm-row>
              <alarm-row label="站级通信" :alarm-num="monthData.countComm" :todo-num="monthData.doComm"></alarm-row>
              <alarm-row
                label="采集装置通信状态"
                :alarm-num="monthData.countGather"
                :todo-num="monthData.doGather"
              ></alarm-row>
            </div>
          </card-list>
          <card-list title="工单信息" class="worke-order">
            <div class="row">
              <div class="item">
                <div class="value">{{ allData.workDay }}</div>
                <div class="label">{{ '当日工单' }}</div>
              </div>
              <div class="item">
                <div class="value">{{ allData.workFinish }}</div>
                <div class="label">{{ '执行工单' }}</div>
              </div>
              <div class="item">
                <div class="value">{{ allData.workMonth }}</div>
                <div class="label">{{ '当月工单' }}</div>
              </div>
            </div>
          </card-list>
          <card-list title="预试定检">
            <div v-if="allData.checkTests.length" class="list">
              <data-row
                v-for="(ct, i) in allData.checkTests"
                :key="i"
                :total-data="[{value: ct.day}]"
                :label="ct.name"
              ></data-row>
            </div>
          </card-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CardList from "./CardList";
import AlarmRow from "./AlarmRow";
import DataRow from "./DataRow";
import { getPreviewData } from "@/api/svg";
export default {
  components: {
    CardList,
    AlarmRow,
    DataRow
  },
  props: {
    stationId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      visible: false,
      allData: null,
      loading: false,
      dateType: "day",
      isInit: true,
      monthData: {},
      dayData: null,
      monthLoading: false,
      monthError: false
    };
  },
  computed: {
    data1() {
      if (!this.allData) return null;
      const { inLineP, inLineQ } = this.allData;
      return [
        { label: "进线有功总加", value: inLineP },
        { label: "进线无功总加", value: inLineQ }
      ];
    },
    data2() {
      if (!this.allData) return null;
      const { transP, transQ } = this.allData;
      return [
        { label: "变压器有功总加", value: transP },
        { label: "变压器无功总加", value: transQ }
      ];
    }
  },
  watch: {
    // stationId: {
    //   handler(id) {
    //     this.loading = true;
    //     // setTimeout(() => {
    //     getPreviewData(id, 1)
    //       .then(data => {
    //         this.allData = data;
    //       })
    //       .finally(() => (this.loading = false));
    //     if (this.dateType === "month") {
    //       this.isInit = true;
    //       this.tabClick(this.dateType);
    //     }
    //     // }, 1000);
    //   },
    //   immediate: true
    // },
    visible(v) {
      if (v) {
        getPreviewData(this.stationId, 1)
          .then(data => {
            this.allData = data;
          })
          .finally(() => (this.loading = false));
        if (this.dateType === "month") {
          this.isInit = true;
          this.tabClick(this.dateType);
        }
      }
    }
  },
  // created() {},
  methods: {
    _getAllData(type) {
      return getPreviewData(this.stationId).then(data => {
        this.allData = data;
      });
    },
    toggle() {
      this.visible = !this.visible;
    },
    tabClick(v) {
      if (v === "month" && this.isInit) {
        this.monthLoading = true;
        getPreviewData(this.stationId, 4)
          .then(data => {
            this.monthData = data;
            this.isInit = false;
          })
          .catch(e => this.$message.error(e))
          .finally(() => (this.monthLoading = false));
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.side-dlg {
  position: relative;
  width: 0;
  background: #eee;
  font-size: 14px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: all 0.5s;
  // transform: translateX(100%);
  &.opened {
    width: 480px;
    // transform: translateX(0);
  }
  .opener {
    position: absolute;
    width: 34px;
    height: 34px;
    background: #2b9ff6;
    text-align: center;
    line-height: 34px;
    left: -34px;
    top: 30%;
    cursor: pointer;
    color: #fff;
    &:hover {
      opacity: 0.7;
    }
  }
}
.wrapper {
  height: 100%;
  overflow: hidden;
  .title {
    background: #aaa;
    height: 36px;
    line-height: 36px;
    padding: 0 34px;
    color: #fff;
  }
  .main {
    height: calc(100% - 36px);
    box-sizing: border-box;
    overflow-y: auto;
    .card-list {
      margin-top: 14px;
      &:first-child {
        margin-top: 0;
      }
    }
    /deep/ .row {
      padding: 0 30px;
      height: 50px;
      align-items: center;
      margin: 0;
      border-top: 1px solid #e7e9ed;
      color: #1d2531;
      &:first-child {
        border-top: 0;
      }
    }
    .worke-order {
      .row {
        height: 70px;
        border: 0;
      }
      .item {
        text-align: center;
        .value {
          font-size: 18px;
          line-height: 1.4;
        }
        .label {
          font-size: 14px;
          color: #7f8fa4;
        }
      }
    }
  }
}
</style>
